<script>
	export default {
		name: "heightText",
		/**
		 * @param textContetn 通过textContetn 指定源文本。
		 * @param textTitle  指定需要高亮的关键字
		 * @param color  高亮后的字体颜色
		 * @param background  高亮后的字体背景
		 */
		props: {
			textContetn: {
				type: String,
				default: '',
			},
			textTitle: {
				type: String,
				default: '',
			},
			color: {
				type: String,
				default: "#1abc9c"
			},
			background: {
				type: String,
				default: "transparent"
			},
		},
		data() {
			return {};
		},
		onLoad() {

		},
		mounted() {
			// this.initHandler()
		},
		methods: {
			initHandler() {
				const searchKeyword = this.textTitle;
				const paragraph = document.querySelectorAll('#html');
				console.log(paragraph)
				const content = paragraph.innerHTML;
				const highlightedContent = content.replace(new RegExp(searchKeyword, 'g'),
					`<span style="color:${this.color};background-color:${this.background} ">${searchKeyword}</span>`);
				paragraph.innerHTML = highlightedContent;
			},
			highlightedContent() {
				const searchKeyword = this.textTitle;
				const content = this.textContetn; // 这里替换为你需要高亮的原始内容
				const highlightedContent = content.replace(new RegExp(searchKeyword, 'g'),
					`<label style="color:${this.color};background-color:${this.background} ">${searchKeyword}</label>`);
				return highlightedContent;
			},
		}
	}
</script>
<template>
	<!-- 高亮文本 -->
	<div ref="html" v-html="highlightedContent()"></div>
</template>
<style scoped>
</style>